<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<script type="text/javascript" src="../../include-all.js"></script>
		<script type="text/javascript">
			var view = new dorado.widget.View({
				layout: "Anchor"
			});
			
			var json = Test.getJSON(Test.ROOT + "resource/hr-data.js");
			var departments = new dorado.EntityList(json, view.dataTypeRepository, getDepartmentsDataType());
			var ds1 = new dorado.widget.DataSet({
				data: departments
			});
			view.addChild(ds1);
			
			var panel1 = new dorado.widget.Panel({
				height: 25,
				layout: new dorado.widget.layout.DockLayout(),
				layoutConstraint: {
					width: 900,
					height: 25
				}
			});
			view.addChild(panel1);
			
			panel1.addChild(new dorado.widget.Button({
				caption: "Previous Dept.",
				listener: {
					onClick: function() {
						ds1.getData().previous();
					}
				},
				layoutConstraint: "left"
			}));
			
			panel1.addChild(new dorado.widget.Button({
				caption: "Next Dept.",
				listener: {
					onClick: function() {
						ds1.getData().next();
					}
				},
				layoutConstraint: "left"
			}));
			
			panel1.addChild(new dorado.widget.Button({
				caption: "Previous Employee",
				listener: {
					onClick: function() {
						ds1.getData("#departments(L)").get("employees").previous();
					}
				},
				layoutConstraint: "left"
			}));
			
			panel1.addChild(new dorado.widget.Button({
				caption: "Next Employee",
				listener: {
					onClick: function() {
						ds1.getData("#departments(L)").get("employees").next();
					}
				},
				layoutConstraint: "left"
			}));
			
			panel1.addChild(new dorado.widget.Button({
				caption: "Insert Employee",
				listener: {
					onClick: function() {
						var department = ds1.getData("#departments(L)");
						var employee = department.createChild("employees", {
							name: "<NEW>"
						}, true);
						department.get("employees").insert(employee, "before");
					}
				},
				layoutConstraint: "left"
			}));
			
			panel1.addChild(new dorado.widget.Button({
				caption: "Delete Employee",
				listener: {
					onClick: function() {
						ds1.getData("#departments(L).#employees").remove();
					}
				},
				layoutConstraint: "left"
			}));
			
			var blockview1 = new dorado.widget.DataBlockView({
				width: "25%",
				height: 180,
				blockLayout: "horizontal",
				fillLine: true,
				lineSize: 2,
				dataSet: ds1,
				dataPath: "#departments(L).employees",
				onRenderBlock: function(self, arg) {
					arg.dom.innerText = arg.data.get("name");
				},
				draggable: true,
				dragTags: "block",
				droppable: true,
				droppableTags: "block",
				dropMode: "onOrInsertItems"
			});
			view.addChild(blockview1);
			
			$(document).ready(function() {
				var s = new Date();
				view.render(document.body);
				document.title = new Date() - s;
			});
		</script>
	</head>
	<body></body>
</html>
